<template>
  <el-menu :default-active="index" mode="horizontal">
    <template v-for="(item,index) in menuData">
      <el-menu-item :index="item.index" :key="index" @click="route(item)">{{item.label}}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script type="text/ecmascript-6">
export default {
  name: '',
  props: ['detailNav', 'menuData'],
  data() {
    return {
      index: '1'
    }
  },
  methods: {
    setDetailNav(key, keyPath) {
      this.index = key
      this.$emit('setMentActive', key)
    },
    route(item) {
      if (item.router) {
        this.$emit('route', item.router)
      }
      this.setDetailNav(item.index)
    }
  },
  mounted() {
    this.index = this.detailNav
  },
  watch: {
    detailNav: {
      handler(newValue, oldValue) {
        this.index = newValue
      },
      deep: true
    }
  },
  components: {}
}
</script>

<style scoped>
</style>
